<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" @submit.native.prevent>
      <el-form-item label="结算周期">
        <el-input size="small" v-model="listQuery.q_settleCycle"></el-input>
      </el-form-item>
      <el-form-item label="结算状态">
        <el-select
          class="toolbar-lable-right"
          size="small"
          v-model="listQuery.q_status"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optStateValues"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="this.getList">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="button-table-margin">
      <el-button size="small" type="primary" @click="todetail">详情</el-button>
      <el-button size="small" type="primary" @click="originate">发起结算</el-button>
      <el-button size="small" type="primary" @click="check">回复质疑</el-button>
      <el-button size="small" type="primary" @click="finish">对账完成</el-button>
      <el-button size="small" type="primary" @click="payOver">打款</el-button>
    </div>
    <el-table
      ref="singleTable"
      :data="dataList"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
      tooltip-effect="dark"
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" align="center" width="50">
      </el-table-column>
      <el-table-column property="settleCycle" label="结算周期">
      </el-table-column>
      <el-table-column width="140" label="结算状态">
        <template slot-scope="scope">
          {{ codeBox.SETTLEMENT_STATUS[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column width="120" property="sellerName" label="店铺">
      </el-table-column>
      <el-table-column property="moneyOrder" label="订单总额">
      </el-table-column>
      <el-table-column width="120" property="payable" label="系统计算总额">
      </el-table-column>
      <el-table-column width="120" property="moneyPaidBalance" label="余额支付总额"></el-table-column>
      <el-table-column width="120" property="moneyPaidReality" label="现金支付总额"></el-table-column>
      <el-table-column width="120" property="moneyIntegral" label="积分转换总额"></el-table-column>
      <el-table-column property="integral" label="积分总额"></el-table-column>
      <el-table-column property="moneyBack" label="退款总额"></el-table-column>
      <el-table-column width="140" property="moneyIntegralBack" label="退回积分金额总额"></el-table-column>
      <el-table-column property="moneyOther" label="其他金额"></el-table-column>
      <el-table-column width="120" label="其他金额类型">
        <template slot-scope="scope">
          {{ codeBox.SETTLE_OTHER_TYPE[scope.row.moneyOtherType] }}
        </template>
      </el-table-column>
      <el-table-column width="120" property="moneyOtherReason" label="其他金额理由"></el-table-column>
      <el-table-column property="commision" label="佣金总额"></el-table-column>
      <el-table-column width="140" property="moneySale" label="三级分销佣金总额"></el-table-column>
      <el-table-column width="140" label="三级分销佣金承担">
        <template slot-scope="scope">
          {{ codeBox.SALE_SETTING[scope.row.saleSet] }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <el-dialog :title="checkTitle" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="commissionForm" :rules="rules" ref="commissionForm">
        <el-form-item label="店铺名称" :label-width="formLabelWidth">
          <div>{{ commissionForm.sellerName }}</div>
        </el-form-item>
        <el-form-item label="其他金额" prop="moneyOther" :label-width="formLabelWidth">
          <el-input-number v-model="commissionForm.moneyOther" :step="1" step-strictly></el-input-number>
        </el-form-item>
        <el-form-item label="其他金额理由" :label-width="formLabelWidth">
          <el-input v-model="commissionForm.moneyOtherReason" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="其他金额类型" :label-width="formLabelWidth">
          <el-select
            class="toolbar-lable-right"
            size="small"
            v-model="commissionForm.moneyOtherType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in otherTypeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台解释" :label-width="formLabelWidth" v-if="isCheck">
          <el-input v-model="commissionForm.platformExplain" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('commissionForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCodeManager, codeToArray } from "@/api/all";
import { settlementListSeller, settleStartSeller, platformExplainSeller, checkOverSeller, payOverSeller } from "@/api/seller";
import Pagination from "@/components/Pagination";
import { Message } from "element-ui";
export default {
  name: 'settlementlist',
  components: { Pagination },
  data() {
    return {
      dataList: [],
      optStateValues: [],
      otherTypeList: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        q_settleCycle: "",
        q_status: "",
      },
      currentRow: null,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      commissionForm: {
        id: '',
        sellerName: '',
        moneyOther: '',
        moneyOtherReason: '',
        moneyOtherType: '',
        platformExplain: ''
      },
      rules: {
        moneyOther: [
          { required: true, message: '请输入其他金额', trigger: 'blur' },
        ],
      },
      isCheck: false, // 是否发起质疑
      checkTitle: ''
    }
  },
  created() {
    // 状态
    getCodeManager("SETTLEMENT_STATUS", () => {
      this.optStateValues = codeToArray("SETTLEMENT_STATUS");
    });
    // 其他金额类型
    getCodeManager("SETTLE_OTHER_TYPE", () => {
      this.otherTypeList = codeToArray("SETTLE_OTHER_TYPE");
    });
    // 列表状态
    getCodeManager("SETTLEMENT_STATUS", () => {});
    getCodeManager("SETTLE_OTHER_TYPE", () => {});
    getCodeManager("SALE_SETTING", () => {});
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      settlementListSeller(this.listQuery).then(res => {
        this.dataList = res.data.rows;
        this.total = res.data.total;
        this.listLoading = false;
      })
    },
    handleCurrentChange(val) {
      // 选中当前行数据
      this.currentRow = val;
    },

    todetail() {
      if(!this.currentRow) {
        Message.error('请选择操作行。')
        return;
      };
      this.$router.push({ path: '/seller/settlementdetail', query:{id:this.currentRow.id} })
    },
    originate() {
      this.checkTitle = '发起结算'
      this.isCheck = false
      // 发起结算
      if (!this.currentRow) {
        Message.error("请选择操作行。");
        return;
      }
      if (this.currentRow.status == 5 || this.currentRow.status == 6) {
        Message.error("支付完成或者对账完成不能发起结算");
        return;
      }
      this.commissionForm.id = this.currentRow.id
      this.commissionForm.moneyOther = this.currentRow.moneyOther
      this.commissionForm.moneyOtherReason = this.currentRow.moneyOtherReason
      this.commissionForm.moneyOtherType = (this.currentRow.moneyOtherType!=0)?''+this.currentRow.moneyOtherType:''
      this.commissionForm.sellerName = this.currentRow.sellerName
      this.dialogFormVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          delete this.commissionForm.sellerName
          if(this.isCheck) {
            // 值为true时是回复质疑
            platformExplainSeller(this.commissionForm).then(res => {
              if(!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success('操作成功')
              this.$refs[formName].resetFields();
              this.dialogFormVisible = false;
              this.getList()
            })
          } else {
            delete this.commissionForm.platformExplain
            settleStartSeller(this.commissionForm).then(res => {
              if(!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success('操作成功')
              this.$refs[formName].resetFields();
              this.dialogFormVisible = false;
              this.getList()
            })
          }
        }
      });
    },
    check() {
      this.isCheck = true
      this.checkTitle = '回复质疑'
      // 回复质疑
      if (!this.currentRow) {
        Message.error("请选择操作行。");
        return;
      }
      if (this.currentRow.status != 4) {
        Message.error("只有在商家核对质疑状态下才能进行此操作");
        return;
      }
      this.commissionForm.id = this.currentRow.id
      this.commissionForm.moneyOther = this.currentRow.moneyOther
      this.commissionForm.moneyOtherReason = this.currentRow.moneyOtherReason
      this.commissionForm.moneyOtherType = (this.currentRow.moneyOtherType!=0)?''+this.currentRow.moneyOtherType:''
      this.commissionForm.sellerName = this.currentRow.sellerName
      this.commissionForm.platformExplain = this.currentRow.platformExplain
      this.dialogFormVisible = true
    },
    finish() {
      // 对账完成
      if (!this.currentRow) {
        Message.error("请选择操作行。");
        return;
      }
      if (this.currentRow.status != 3) {
        Message.error("只有商家核对通过才能进行对账完成操作");
        return;
      }
      this.$confirm("确定要对账完成吗？", "提示", {
        onfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        checkOverSeller({ id: this.currentRow.id }).then(res => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.getList();
          } else {
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    payOver() {
      // 打款
      if (!this.currentRow) {
        Message.error("请选择操作行。");
        return;
      }
      if (this.currentRow.status != 5) {
        Message.error("只有对账完成才能进行打款操作");
        return;
      }
      this.$confirm("确定已经给商家打款了吗？", "提示", {
        onfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        payOverSeller({ id: this.currentRow.id }).then(res => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.getList();
          } else {
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    reset() {
      this.listQuery.q_settleCycle = "";
      this.listQuery.q_status = "";
      this.getList();
    },
  }
}
</script>

